<template>
  <div id="user" class="manage-pos">
    <tag-box v-show="showChild">
      <template v-slot:department>
        <div class="opentype-tag choose-bg-tag">用户信息</div>
      </template>
    </tag-box>
    <div class="dep_top" v-show="!showChild">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="用户名">
                <a-input
                  v-model="queryParam.username"
                  placeholder="请输入"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="用户状态">
                <a-select
                  v-model="queryParam.userStatus"
                  placeholder="请选择">
                  <a-select-option value="">请选择</a-select-option>
                  <a-select-option key="Y" value="Y">
              <span
                style="display: inline-block;width: 100%"
                title="启用">启用</span>
                  </a-select-option>
                  <a-select-option key="N" value="N">
              <span
                style="display: inline-block;width: 100%"
                title="废弃">废弃</span>
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="员工姓名">
                <a-input
                  v-model="queryParam.employeeName"
                  placeholder="请输入"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
          <span class="table-edit-submitButtons">
            <a-button type="primary" class="ml8" v-action:query @click="$refs.table.refresh(true)">查询</a-button>
            <a-button class="ml8" @click="handleReset">重置</a-button>
            <a-button type="danger" class="ml8" v-action:add @click="openAddComp">新增</a-button>
          </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
    <div class="dep_main" v-show="!showChild">
      <s-table
        ref="table"
        size="default"
        :row-key="(r,i) => i.toString()"
        :columns="columns"
        :data="loadData">
        <span slot="action" slot-scope="t, r">
          <a v-action:edit href="javascript:void(0);" @click="editUser(r)">编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a v-action:changePassword href="javascript:void(0);" @click="reset(r.id)">重置</a>
              </a-menu-item>
              <a-menu-item>
                <a v-action:delete href="javascript:void(0);" @click="del(r.id)">删除</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </s-table>
    </div>
    <transition name="slide-fade">
      <div class="popContainer" v-if="showChild">
        <add-user
          v-if="openType === 0"
          :show-child.sync="showChild"
          @addUser="addUser"
        ></add-user>
        <edit-user
          v-if="openType === 1"
          :show-child.sync="showChild"
          :form-data="formData"
          @updateUser="updateUser"
        ></edit-user>
      </div>
    </transition>
  </div>
</template>
<script>
import {
  userList,
  addUser,
  passwordReset,
  deleteUser,
  roleAll,
  employeeAll,
  changeUser, deleteDep
} from '@/api/leave'
import { TagBox } from '@/myComponents'
import { STable } from '@/components'
import { AddUser, EditUser } from './modules'
// import {aesEncryptData} from "@/utils/secret"
export default {
  name: 'User',
  components: {
    STable,
    AddUser,
    TagBox,
    EditUser
  },
  data () {
    return {
      loading: false,
      openType: 0,
      formData: {},
      showChild: false,
      columns: [
        {
          title: '序号',
          width: 50,
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          customRender: (t, r, index) => {
            return ((this.paginationInfo.pageNum - 1) * this.paginationInfo.pageSize + index + 1)
          }
        },
        {
          title: '用户名',
          width: 90,
          align: 'center',
          dataIndex: 'username'
        },
        {
          title: '部门',
          width: 120,
          align: 'center',
          dataIndex: 'departmentName'
        },
        {
          title: '员工',
          width: 90,
          align: 'center',
          dataIndex: 'employeeName'
        },
        {
          title: '账户角色',
          width: 90,
          align: 'center',
          dataIndex: 'roleName'
        },
        {
          title: '状态',
          width: 90,
          align: 'center',
          dataIndex: 'userStatus',
          customRender: function (t, r, index) {
            return t === 'Y' ? '启用' : '废弃'
          }
        },
        {
          title: '操作',
          width: 90,
          dataIndex: '',
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ],
      queryParam: {},
      paginationInfo: null,
      loadData: parameter => {
        this.paginationInfo = parameter
        return userList(Object.assign(parameter, this.queryParam))
          .then(res => {
            if (res.code === 0) {
              return res.data
            } else {
              this.$message.error(res.msg)
              return {
                list: []
              }
            }
          })
      }
    }
  },
  created () {

  },
  mounted () {
  },
  methods: {
    psdReset (uid) {
      // 重置密码
      this.$confirm('是否重置密码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.reset(uid.id)
      })
    },
    editUser (row) {
      this.openType = 1
      this.showChild = true
      this.formData = row
    },
    openAddComp () {
      this.showChild = true
      this.openType = 0
    },
    handleReset () {
      this.queryParam = {}
      this.$refs.table.refresh(true)
    },
    queryUser (data) {
      this.queryParam = data
      this.$refs.table.refresh(true)
    },
    async reset (value) {
      const psdData = await passwordReset(value)
      if (psdData.code === 0) {
        this.$message.success(psdData.msg)
        this.$refs.table.refresh()
      } else {
        this.$message.warning(psdData.msg)
      }
    },
    async addUser (obj) {
      // 新增用户
      const userMsg = await addUser(obj)
      if (userMsg.code === 0) {
        this.$message.success(userMsg.msg)
        this.$refs.table.refresh(true)
      } else {
        this.$message.warning(userMsg.msg)
      }
    },
    async updateUser (data) {
      console.log(data)
      const { username, employeeId, userStatus, role, passwords } = data
      const dataMsg = { username, employeeId, userStatus, role, passwords }
      // dataMsg.employeeId = parseInt(data.employeeId);
      const changeMsg = await changeUser(data.id, dataMsg)
      if (changeMsg.code === 0) {
        this.$message.success(changeMsg.msg)
        this.$refs.table.refresh()
      } else {
        this.$message.warning(changeMsg.msg)
      }
    },
     del (id) {
      let _this = this
      this.$confirm({
        title: '确定删除该账户么',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          deleteUser(id).then(res => {
            if (res.success) {
              _this.$message.success(res.msg)
              _this.$refs.table.refresh(true)
            } else {
              _this.$message.warning(res.msg)
            }
          })
        },
        onCancel () {
        }
      })
    }
  }
}
</script>
<style scoped>
.el-table td,
.el-table th {
  text-align: center;
}

.block {
  margin-top: 5px;
}
/*.popContainer {*/
/*  position: fixed;*/
/*  display: flex;*/
/*  top: 0;*/
/*  left: 180px;*/
/*  right: 0;*/
/*  bottom: 0;*/
/*  z-index: 1000;*/
/*  background: rgba(16, 16, 16, 0.2);*/
/*}*/
</style>
